<html xmlns="http://www.w3.org/1999/xhtml" > 
    <head>
        <title>evol-colorpicker</title>
        <meta charset="utf-8">
            <link id="jquiCSS" rel="stylesheet" href="../jquery-ui-1.12.1/themes/start/jquery-ui.css" type="text/css" media="all">
                <link href="css/demo.css" rel="stylesheet" /> 
                <link href="css/evol-colorpicker.min.css" rel="stylesheet" />
                <script src="../jquery/jquery-1.12.3.min.js" type="text/javascript"></script>
                <script src="../jquery-ui-1.12.1/jquery-ui.min.js" type="text/javascript"></script>
                <script src="js/evol-colorpicker.min.js" type="text/javascript"></script>
                </head>

                <body>

                    <h1 id="title">evol-colorpicker demo</h1>

                    <h2 id="github">
                        <a href="https://github.com/evoluteur/colorpicker">GitHub</a>
                    </h2>

                    <p><strong>evol-colorpicker</strong> (currently v3.2.6) is a web color picker which looks like the one in Microsoft Office 2010.
                        It can be used inline or as a popup bound to a text box.
                        It is a full jQuery UI widget, supporting various configurations and themes.
                    </p>

                    <div style="padding:2px 40px">

                        <p>Themes:
                            <a href="#" class="css sel">ui-lightness</a> -
                            <a href="#" class="css">ui-darkness</a> -
                            <a href="#" class="css">redmond</a> -
                            <a href="#" class="css">sunny</a> -
                            <a href="#" class="css">le-frog</a>
                        </p>

                        <div class="demoPanel">
                            Inline (using a DIV tag):<br/><br/>
                            <div id="cpDiv"></div>
                            <br/>
                            <div class="demo-links">
                                <a href="#" id="getVal2">Get Value</a>
                                <a href="#" id="setVal2">Set Value</a><br/>
                                <a href="#" id="enable2">Enable</a>
                                <a href="#" id="disable2">Disable</a>
                                <a href="#" id="destroy2">Destroy</a><br/><br/>
                            </div> 
                        </div>

                        <div class="demoPanel">
                            Inline with "web" default palette:<br/><br/>
                            <div id="cpDiv2"></div> 
                        </div>

                        <div class="demoPanel" style="width:130px">
                            Using "showOn" option:<br/><br/>
                            button
                            <input id="cpButton" value="#92cddc" />
                            focus 
                            <input id="cpFocus" value="#dbeef3" />
                            both
                            <input id="cpBoth" value="#31859b" />
                            <a href="#" id="show">link</a>
                            <input id="cpOther" value="#002060" />
                        </div>

                        <div id="cpb" class="demoPanel" style="width:170px">
                            Event binding:<br/>
                            change.color and mouseover.color<br/><br/>
                            <input id="cp1"/><br/> 
                            <div id="tests" class="demo-links">
                                <a href="#" id="getVal">Get Value</a>
                                <a href="#" id="setVal">Set Value</a><br/>
                                <a href="#" id="enable">Enable</a>
                                <a href="#" id="disable">Disable</a>
                                <a href="#" id="clear">Clear</a>
                                <a href="#" id="destroy1">Destroy</a>
                            </div>
                        </div>

                        <div class="demoPanel" style="width:130px">
                            With transparent color:<br/>
                            <br/> 
                            <input id="transColor" value="#0000ffff" /><br/> 
                        </div>

                        <div class="demoPanel" style="width:130px">
                            Using "hideButton" option:<br/>
                            <br/>
                            <input id="hideButton" value="#92cddc" /><br/>
                        </div>

                        <div class="demoPanel ui-widget ui-widget-content ui-corner-all" style="width:130px;">
                            No color indicator on the palette:<br/>
                            <br/> 
                            <input id="noIndColor" value="#92cddc" /><br/> 
                        </div>

                        <div class="demoPanel ui-widget ui-widget-content ui-corner-all" style="width:130px;">
                            In French:<br/>
                            <br/> 
                            <input id="frenchColor" value="#92cddc" /><br/>
                            Using the "strings" option you can translate the colorpicker.<br/>
                        </div>
                        <div style="clear:both;"></div>

                    </div>

                    <script>

                        $(document).ready(function () {

                            // Change theme
                            $('.css').on('click', function (evt) {
                                $('#jquiCSS').attr('href', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/' + this.innerHTML + '/jquery-ui.css');
                                $('.css').removeClass('sel');
                                $(this).addClass('sel');
                            });

                            // Events demo
                            $('#cp1').colorpicker({color: '#8db3e2',
                                initialHistory: ['#ff0000', '#000000', 'red']
                            })
                                    .on('change.color', function (evt, color) {
                                        $('#cpb').css('background-color', color);
                                    })
                                    .on('mouseover.color', function (evt, color) {
                                        if (color) {
                                            $('#cpb').css('background-color', color);
                                        }
                                    });

                            $('#getVal').on('click', function () {
                                alert('Selected color = "' + $('#cp1').colorpicker("val") + '"');
                            });
                            $('#setVal').on('click', function () {
                                $('#cp1').colorpicker("val", '#31859b');
                            });
                            $('#enable').on('click', function () {
                                $('#cp1').colorpicker("enable");
                            });
                            $('#disable').on('click', function () {
                                $('#cp1').colorpicker("disable");
                            });
                            $('#clear').on('click', function () {
                                var v = $('#cp1').colorpicker("clear");
                            });
                            $('#destroy1').on('click', function () {
                                var v = $('#cp1').colorpicker("destroy");
                            });

                            // Instanciate colorpickers
                            $('#cpBoth').colorpicker();
                            $('#cpDiv').colorpicker({color: '#31859b'});
                            $('#cpDiv2').colorpicker({color: '#31859b', defaultPalette: 'web'});
                            $('#cpFocus').colorpicker({showOn: 'focus'});
                            $('#cpButton').colorpicker({showOn: 'button'});
                            $('#cpOther').colorpicker({showOn: 'none'});
                            $('#show').on('click', function (evt) {
                                evt.stopImmediatePropagation();
                                $('#cpOther').colorpicker("showPalette");
                            });

                            // With transparent color
                            $('#transColor').colorpicker({
                                transparentColor: true
                            });

                            // With hidden button
                            $('#hideButton').colorpicker({
                                hideButton: true
                            });

                            // No color indicator
                            $('#noIndColor').colorpicker({
                                displayIndicator: false
                            });

                            // French colorpicker
                            $('#frenchColor').colorpicker({
                                strings: "Couleurs de themes,Couleurs de base,Plus de couleurs,Moins de couleurs,Palette,Historique,Pas encore d'historique."
                            });

                            // Inline colorpicker
                            $('#getVal2').on('click', function () {
                                alert('Selected color = "' + $('#cpDiv').colorpicker("val") + '"');
                            });
                            $('#setVal2').on('click', function () {
                                $('#cpDiv').colorpicker("val", '#31859b');
                            });
                            $('#enable2').on('click', function () {
                                $('#cpDiv').colorpicker("enable");
                            });
                            $('#disable2').on('click', function () {
                                $('#cpDiv').colorpicker("disable");
                            });
                            $('#destroy2').on('click', function () {
                                $('#cpDiv').colorpicker("destroy");
                            });

                            // Fix links
                            $('a[href="#"]').attr('href', 'javascript:void(0)');

                        });

                    </script>

                    <p><br/><a href="https://github.com/evoluteur/colorpicker/archive/master.zip">Download</a>, documentation, and source code are available at <a href="https://github.com/evoluteur/colorpicker" target="download">GitHub</a> under the <a href="http://github.com/evoluteur/colorpicker/raw/master/LICENSE.md">MIT license</a>.</p>

                    <br/><br/>
                    <div class="footer">&#169; 2016 Olivier Giulieri</div>

                </body>

                </html>